<template>
  <div id="background" class="content">
    <video autoplay loop muted poster="/images/banner.jpg" src="/images/banner.mp4"></video>
    <Row class="header">
      <img alt src="../../images/logo.png" style="width:320px"/>
    </Row>
    <Row class-name="row" justify="center" type="flex" @keydown.enter.native="submit('form')">
      <br/>
      <Col class="loginFrom">
      <Form ref="form" :model="form" :rules="ruleInline">
        <FormItem prop="email">
          <Input
            v-model="form.email"
            :placeholder="$t('login.username')"
            size="large"
            type="text"
          >
          <Icon slot="prepend" type="md-person"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            v-model="form.password"
            :placeholder="$t('login.password')"
            size="large"
            type="password"
          >
          <Icon slot="prepend" type="md-lock"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="verifyCode">
          <Input
            v-model="form.verifyCode"
            placeholder="请输入验证码（不区分大小写）"
            size="large"
            style="width: 238px;"
            type="text"
          />
          <vue-img-verify ref="vueImgVerify" @getImgCode="getImgCode"/>
        </FormItem>
        <FormItem class="bottom">
          <Checkbox v-model="form.remember" class="rememberMe" size="large">自动登录</Checkbox>
          <router-link class="forgetPassword" to="/password/send">
            <span>忘记密码</span>
          </router-link>
        </FormItem>
        <FormItem class="bottom">
          <Button
            id="loginButton"
            :loading="loading"
            long
            size="large"
            type="primary"
            @click="submit('form')"
          >登录
          </Button>
        </FormItem>
      </Form>
      </Col>
    </Row>
  </div>
</template>

<script>
import './login.css'
import VueImgVerify from '../../components/ImgVerify'

const extend = function (to, _from) {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}
export default {
  name: 'Index',
  components: {
    VueImgVerify
  },
  data() {
    const verifyCodeCheckValidate = (rule, value, callback) => {
      const verifyCode = this.form.verifyCode.toLowerCase()
      const imgCode = this.imgCode.toLowerCase()
      if (verifyCode !== '') {
        if (verifyCode !== imgCode) {
          callback(new Error('验证码错误，请重新输入'))
        } else {
          callback()
        }
      } else {
        callback(new Error('请输入验证码'))
      }
    }
    return {
      title: this.$store.state.settings.title,
      verifyCodeCheckValidate,
      imgCode: '',
      loading: false,
      form: {
        email: '',
        password: '',
        verifyCode: '',
        remember: true
      },
      ruleInline: {
        email: [{required: true, message: '请填写用户名', trigger: 'blur'}],
        password: [
          {required: true, message: '请填写登录密码', trigger: 'blur'}
        ],
        verifyCode: [
          {
            required: true,
            validator: verifyCodeCheckValidate,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  mounted() {
    this.imgCode = this.$refs.vueImgVerify.draw()
  },
  methods: {
    // 点击图片获取验证码
    getImgCode(code) {
      this.imgCode = code
      this.form.verifyCode = ''
      // console.log('验证码: ' + this.imgCode);
    },
    submit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('login', this.form).then(res => {
            this.loading = false
            this.$router.push({name: 'home'})
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.loginFrom {
  width: 368px;
}

.row {
  padding-top: 100px;

  .bottom {
    margin-bottom: 14px;

    .rememberMe {
      margin-left: 5px;
      color: #e8f0fe;
      font-size: 14px;
    }

    .forgetPassword {
      float: right;
      color: aliceblue;
    }
  }
}
</style>
